<template>
  <div class="Hot">
    <div class="hotop">
      <div class="hotopct">
        <div class="cloud"></div>
        <div v-if="playList" class="playlist">
          更新日期: {{playList.createTime|formateTime}}
          <!-- <div>简介:{{playList.description}}</div> -->
        </div>
      </div>
    </div>
    <ul class="hotul">
      <MusicListItem
        @play="$emit('play',$event)"
        :list="list"
        v-for="(list,index) in showlist"
        :key="list.id"
        :index="index"
      >
        <div class="listnum" :class="['num',{red:index<3}]">{{index+1|addZero}}</div>
      </	>
    </ul>
    <Loading v-if="showlist.length==0"></Loading>
    <p class="loadermore" @click="loadermore">加载更多....</p>
  </div>
</template>

<script>
import MusicListItem from "@/components/MusicListItem";
import Loading from "@/components/Loading";
export default {
  name: "Hot",

  data() {
    return {
      showlist: [],
      playList: null,
      limit: 20,
    };
  },
  filters: {
    addZero(val) {
      // console.log(val);
      return val < 10 ? "0" + val : val;
    },
    formateTime(val) {
      let d = new Date(val);
      return d.getMonth() + 1 + "月" + d.getDate() + "日";
    },
  },
  methods: {
    loadermore() {
      let num = this.showlist.length + this.limit;
      this.showlist = this.Hotlist.slice(0, num);
    },
  },
  mounted() {
    this.$http.get("/playlist/detail?id=3778678").then((dlist) => {
      this.playList = dlist.data.playlist;
      this.Hotlist = dlist.data.playlist.tracks.map((d, index) => {
        let data = d;
        data.song = {
          artists: d.ar,
          privilege: {
            playMaxbr: dlist.data.privileges[index].playMaxbr,
          },
        };
        return data;
      });
      console.log(this.Hotlist);
      this.showlist = this.Hotlist.splice(0, this.limit);
    });
  },
  components: {
    MusicListItem,
    Loading,
  },
};
</script>

<style lang="less" scope>
.Hot {
  margin-top: 40px;
}
ul,
ol {
  list-style: none;
}
.hotul {
  background-color: #ffff;
  padding: 5px 0px 0px 0px;
}
.hotop {
  position: relative;
  padding-top: 38.9%;
  overflow: hidden;
  background: url('../assets/images/hot.jpg')
    no-repeat;
  background-size: contain;
}

.hotopct {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  padding-left: 20px;
}
.cloud {
  width: 9.5rem;
  height: 4.5rem;
  background-position: -1.6rem -2rem;
  background: url('../assets/images/hotsong.png')
    no-repeat -1.6rem -2rem;
  background-size: 11rem 6.4rem;
  margin-top: 12%;
}

.list .listnum {
  float: left;
  width: 30px;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  padding-right: 10px;
}
.playlist {
  margin-top: 0.6rem;
  color: hsla(0, 0%, 100%, 0.8);
  font-size: 0.8rem;
}
.loadermore {
  line-height: 30px;
  font-size: 12px;
  height: 30px;
  text-align: center;
  color: #999;
  margin-bottom: 4rem;
  cursor: pointer;

}
</style>
